<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParams.params" @on-search="search" @on-reset="resetSearch"></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef" :fetch="fetch" :columns="tableConfig.columns" :operate="operate"
            :param="state.param" :toolbar="toolbar" :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="state.importVisible"
      @close="closeImport"></importModal>
  </page-layout>
</template>
<script>
export default {
  name: "orderManage"
}
</script>
<script setup>
  import {
    btnIsPowerByCode,
    filterEmptyByObject
  } from '@/tools/common'
  import {
    message,
    modal
  } from 'ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    imports,
    templateUrl
  } from "@/api/module/student/order-manage";
  import {
    reactive,
    createVNode,
    ref,
    onMounted,
    onActivated
  } from 'vue';
  import {
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import moment from 'moment';
  import { useI18n } from "vue-i18n";
  import importModal from '@/component/import/index.vue'
  const  { t } = useI18n();
  const removeKey = "remove";
  const tableRef = ref()
  const router = useRouter()
  const pagination = {
    pageNum: 1,
    pageSize: 10,
  }
  let dictLists = reactive({
    data: {}
  })
  const state = reactive({
    selectedRowKeys: [],
    param: {},
    visibleSave: false,
    visibleEdit: false,
    visibleInfo: false,
    recordEdit: {},
    recordInfo: {},
    importVisible: false,
  })

  let searchParams = reactive({
    params: []
  })

  let tableConfig = reactive({
    columns: []
  })
	const toolbar = [
    {
      code: 'order-manage:add',
      label: '签单',
      type: 'primary',
      event: (selectedRowKeys) => {
        router.push('/studentrtv/order-manage/add')
      }
    },
    {
      code: "",
      label: t('button.batchImport'),
      type: "",
      event: (selectedRowKeys) => {
        handleExport();
      },
    },
  ]

  const exportConfig = reactive({
    title: '学籍导入',
    exportExcel: imports,
    templateUrl: templateUrl,
    downMethod: 'GET',
    fileName: '学籍导入模板',
    params: {}
  })
  const handleExport = () => {
    state.importVisible = true
  };
  const closeImport = (value) => {
    state[value] = false
    tableRef.value.reload()
  }
  const resetSearch = () => {
    state.param = {
      name: null,
      credentialHighest: null,
      serviceSchool: null,
      createTime: null,
      citizenship: null
    }
    tableRef.value.reload()
  }
onActivated(() => {
    tableRef.value.reload();
  })
  /// 数据来源 [模拟]
  const fetch = async (param) => {
    const response = await page(param);
    return {
      data: response.data.record,
      total: response.data.total
    };
  };

  /// 行操作
  const operate = [
    {
      label: t('button.detail'),
      event: (record) => {
        console.log('record: ', record);
        router.push({
          path: '/studentrtv/order-manage/detail',
          query: {
            id: record.id
          }
        })
      }
    },
    {
      label: t('button.collection-1'),
      event: (record) => {
        router.push({
          path: '/studentrtv/order-manage/collection',
          query: { ...record }
        })
      }
    },
  ];

  const openDialog = (type) => {
    state[type] = true
  }

  const search = (value) => {
    state.param = {
      ...state.param,
      ...filterEmptyByObject(value)
    }
  }

  const onSelectChange = selectedRowKeys => {
    state.selectedRowKeys = selectedRowKeys;
  };

  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.AGREEMENT_STATUS,
      dictEnum.PAY_STATUS,
    ])
    searchParams.params = [{
        dataIndex: "stuName",
        key: "stuName",
        type: "input",
        label: t('order-manage.label.stuName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "orderSn",
        key: "orderSn",
        type: "input",
        label: t('order-manage.label.orderSn'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "project",
        key: "project",
        type: "input",
        label: t('order-manage.openDialog.projectName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "school",
        key: "school",
        type: "input",
        label: t('order-manage.openDialog.schName'),
        placeholder: t('placeholder.pleaseEnter'),
        hidden: true
      },
      {
        dataIndex: "semester",
        key: "semester",
        type: "input",
        label: t('order-manage.openDialog.semester'),
        placeholder: t('placeholder.pleaseEnter'),
        hidden: true
      },
      {
        dataIndex: "createTime",
        key: "createTime",
        type: "rangeTime",
        label: t('order-manage.label.createTime'),
        hidden: true
      },
      {
        dataIndex: "status",
        key: "status",
        type: "select",
        label: t('order-manage.label.payStatus'),
        placeholder: t('placeholder.pleaseSelect'),
        options: dictLists.data[dictEnum.PAY_STATUS],
        hidden: true
      }
    ]

    tableConfig.columns = [{
        dataIndex: "orderNo",
        key: "orderNo",
        title: t('order-manage.label.orderSn'),
        width: 160,
      },
      {
        dataIndex: "stuName",
        key: "stuName",
        title: '学生姓名',
      },
      {
        dataIndex: "totalAmt",
        key: "totalAmt",
        title: '订单金额',
      },
      {
        dataIndex: "discountAmt",
        key: "discountAmt",
        title: '优惠金额',
      },
      {
        dataIndex: "specialAmt",
        key: "specialAmt",
        title: '特殊优惠金额',
      },
      {
        dataIndex: "receivableTotalAmt",
        key: "receivableTotalAmt",
        title: '应收总金额',
      },
      {
        dataIndex: "receivedTotalAmt",
        key: "receivedTotalAmt",
        title: '已收总金额',
      },
      {
        dataIndex: "status",
        key: "status",
        title: t('order-manage.label.payStatus'),
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.PAY_STATUS]) {
            const item = dictLists.data[dictEnum.PAY_STATUS].find(
              v => v.value == data
            );
            return item ? item.label : "";
          }
        }
      },
    ]
  })
</script>
